<!--关联产品-->
<template>
  <div class="related-products">
    <div class="header">
      <div class="header-left">
        <div class="top">
          <span class="back" @click="goBack"><i class="iconfont icon-fanhui" style="font-size: 24px;"></i></span>
          <span class="title">关联产品</span>
        </div>
      </div>
    </div>
    <div>
      <div class="detail-box">
        <div>
          <span class="label">固件名称</span>
          {{ formSearch.productName }}
        </div>
        <div>
          <span class="label">固件Key</span>
          {{ formSearch.componentId }}
        </div>
      </div>
      <el-form ref="form" :inline="true" class="search-form">
        <el-col :span="24">
          <el-form-item label="产品名称">
            <el-input v-model="formSearch.name" placeholder="请输入固件名称" clearable />
          </el-form-item>
          <el-form-item label="产品ID">
            <el-input v-model="formSearch.productId" placeholder="请输入产品ID" clearable />
          </el-form-item>
          <el-button
            type="primary"
            size="14"
            @click="relatedProductsList()">查询</el-button>
        </el-col>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F5F6F7' }"
        size="medium">
        <el-table-column prop="productName" label="产品名称"> </el-table-column>
        <el-table-column prop="productId" label="产品ID"> </el-table-column>
        <el-table-column prop="version" label="固件版本"> </el-table-column>
        <el-table-column prop="bindCreateTime" label="关联时间"> </el-table-column>
        <el-table-column prop="productCreateTime" label="产品创建时间"> </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getProductListByComponent } from "@/api/product/firmware"
export default {
  name: 'relatedProducts',
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      loading: false,
      formSearch: {
        productName: '', // 产品名称
        componentId: '', // 固件id
        productId: '' // 产品ID
      },
      name: '' // 固件名称
    }
  },
  created() {
    this.formSearch.componentId = this.$route.query.id
    this.formSearch.productName = this.$route.query.name
    this.relatedProductsList()
  },
  destroyed() {
    const url = this.$route.path
    if (!url.includes('/product/product-details/')) {
      sessionStorage.removeItem('activeName')
    }
  },
  methods: {
    // 关联产品列表
    relatedProductsList() {
      this.loading = true
      const params = {
        current: this.currentPage,
        size: this.pageSize,
        ...this.formSearch
      }
      getProductListByComponent(params).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryFirmwareManageList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryFirmwareManageList()
    },
    // 返回固件管理
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.related-products {
  .header {
    margin-bottom: 15px;

    .header-left {
      .top {
        display: flex;
        align-items: center;

        .back {
          margin-right: 13px;
          cursor: pointer;
        }

        .title {
          font-size: 16px;
          font-weight: 600;
          color: #252525;
        }
      }
    }

    .form-wrap {
      background: #F5F6F7;
      margin: 15px 0;
      padding: 20px 20px 0 20px;
    }

    ::v-deep .el-form-item__label {
      font-weight: 600;
    }

    .btn {
      color: #275FE8;
      cursor: pointer;
    }
  }

  .detail-box {
    font-size: 14px;
    display: flex;

    div {
      margin-right: 100px;
      color: #252525;

      .label {
        font-weight: 600;
        margin-right: 35px;
      }
    }
  }

  .search-form {
    margin-top: 20px;
  }
}
</style>
